<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="goods.css">

</head>

<body>
    <div class="goodsinfo">
        <form action="" class="choose">
            <ul>
                <li class="product">
                    <dl>
                        <dt>颜色：</dt>
                        <dd><a class="selected" href="javascript:;">白色</a><a class="" href="javascript:;">黑色</a></dd>
                    </dl>
                </li>
                <li class="product">
                    <dl>
                        <dt>内存：</dt>
                        <dd><a class="selected" href="javascript:;">2G</a><a class="" href="javascript:;">4G</a></dd>
                    </dl>
                </li>
            </ul>
        </form>
    </div>
    <script>
        // data 变量表示的是服务端发给我们的商品的sku(货品)信息，根据数据 将可以选择的信息显示在ul标签中，最终显示结果  颜色：白色 黑色  内存：2G 4G 倒推
        var data = [{
                "id": 6,
                "goodsSku": {
                    "颜色": "白色",
                    "内存": "2G"
                },
            },
            {
                "id": 7,
                "goodsSku": {
                    "颜色": "白色",
                    "内存": "4G"
                }
            },
            {
                "id": 8,
                "goodsSku": {
                    "颜色": "黑色",
                    "内存": "2G"
                }
            },
            {
                "id": 9,
                "goodsSku": {
                    "颜色": "黑色",
                    "内存": "4G"
                },
            }
        ];
        // 上面的data 数据中每一个元素表示的是一组可能的组合，如果需要将信息显示，需要对已有的data 进行整理，需要将具体有多少类型，每种类型有多少值需要整理
    </script>
</body>

</html>